<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix" />
			<text class="title">励氪签</text>
		</view>
		<view class="login-form-content">
			<swiperTabHead :tabBars="labelList" :tabIndex="tabIndex" @tabtap="tabtap"></swiperTabHead>
			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model="loginForm.mobile" class="input" type="text" placeholder="请输入手机号/个人账号" maxlength="11" />
			</view>
			<view class="input-item flex align-center" v-if="tabIndex == 0" style="margin-bottom: 80rpx;">
				<view class="iconfont icon-password icon"></view>
				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
			</view>
			<view class="input-item flex align-center" v-if="tabIndex == 1">
				<view class="iconfont icon-code icon"></view>
				<input v-model="loginForm.smscode" type="number" class="input" placeholder="请输入验证码" maxlength="6" />
				<text @click="getSMSCode(2)" class="login-code" v-show="btnShow">获取验证码</text>
				<text class="login-code text-primary" style="width: 140rpx;" v-show="!btnShow">{{counter}}</text>
			</view>
			<view class="sounds-text" v-if="tabIndex == 1" v-show="voiceShow" @click="getSMSCode(102)">收不到短信？使用语音验证码</view>
			<view class="action-btn" style="margin-top: 80rpx">
				<view class="xieyi text-center">
					<text class="text-grey1">登录即代表您已同意</text>
					<text @click="handleUserAgrement" class="text-primary">《用户使用协议》</text>
					<text @click="handlePrivacy" class="text-primary">《用户隐私协议》</text>
				</view>
				<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round"
					style="background-color: #00a660;">登录</button>
			</view>
			<view class="gray-row text-center">
				<text class="marginLeft" @click="register">新用户注册</text>|
				<text class="marginLeft" @click="recoverAccount">找回账号</text>|
				<text class="marginLeft" @click="forgetPassword">找回密码</text>
			</view>
		</view>
    <!--滑块验证弹出-->
    <slider-verify :show="verifyShow" :do-action="doAction" @success="touchSliderResult" @close="onClose"></slider-verify>
	</view>
</template>

<script>
	import {getToken} from '@/utils/auth'
  import {changeCompany} from "../api/login";
  import {getLegalChangeRecordNewInfo} from "../api/ec/console/index";
  import swiperTabHead from "@/components/slideTab/slideTab"
  import SliderVerify from "../components/slider-verify/slider-verify";
  import {getCode} from "../utils/sendSmsCode";
	export default {
    mixins: [getCode],
    components: {SliderVerify, swiperTabHead},
		data() {
			return {
				tabIndex:0,
				labelList: [{title: '密码登录'}, {title: '验证码登录'}],
				globalConfig: getApp().globalData.config,
				loginForm: {
					mobile:"",
					password: "",
          smsType: 1, // 0验证码 1密码 2扫码
					smscode: '',
				},
				signDetail: null, // 签署详情参数
        companyId:null,// 发送方的企业id
        companyName:null,// 发送方的企业名字
        orderPay:null,// 存在待支付订单
        verifyType:null,// 存在法人变更
			}
		},
		onLoad(option) {
			// 判断是否登录过
			if (!!getToken()) {
				this.loginSuccess();
			}
			// 存在签署详情
			if (!!option.signDetail) {
				this.signDetail = option.signDetail;
			}
			// 存在分享注册信息
			let shareReg = option.shareReg;
			if (!!shareReg) {
			  // 如果有cookie还没过期就不进行设置 60天
			  if (!uni.getStorageSync("shareReg")) {
			    uni.setStorageSync("shareReg", shareReg, 5184000000)
			  }
			}
      // 存在待支付的订单
      if (!!option.orderPay) {
        this.orderPay = option.orderPay;
        this.companyName = option.companyName;
      }
      // 存在法人变更签署文件
      if (!!option.verifyType) {
        this.verifyType = option.verifyType;
        this.companyId = option.companyId;
        this.loginForm.mobile = option.mobile;//法人手机号
      }
		},
		methods: {
			/** 接受子组件传过来的值点击切换导航 */
			tabtap(index) {
        // 若是密码登录 清空状态
        if (index == 0) {
          this.doAction = "this.handleLogin()";
        }
        this.tabIndex = index;
			},
			// 找回账号
			recoverAccount(){
				this.$tab.navigateTo('/pages/recoverAccount')
			},
			// 找回密码
			forgetPassword(){
				this.$tab.navigateTo('/pages/forgetPassword')
			},
			// 新用户注册
			register(){
				this.$tab.navigateTo('/pages/register')
			},
			// 获取验证码
			getSMSCode(type) {
        if (this.loginForm.mobile === "") {
          this.$modal.msgError("请输入您的手机号")
          return;
        }
        // 直接唤起验证弹窗
        this.verifyShow = true;
        this.doAction = "this.getCode(this.loginForm.mobile, this.loginForm.smsType)";
        this.loginForm.smsType = type
			},
			// 隐私协议 
			handlePrivacy() {
				this.$tab.navigateTo('/pages/common/policy/privacyPolicy')
			},
			// 用户协议 
			handleUserAgrement() {
				this.$tab.navigateTo('/pages/common/policy/userAgreement')
			},
			// 登录方法
			async handleLogin() {
        if (this.loginForm.mobile === "") {
          this.$modal.msgError("请输入您的账号")
          return;
        }
        // 密码登录校验
        if (this.tabIndex == 0) {
          this.loginForm.type = 1;
          if(this.loginForm.password === "" ){
            this.$modal.msgError("请输入您的密码")
            return;
          }
        }
        // 验证码登录校验
        if (this.tabIndex == 1) {
          this.loginForm.type = 0;
          if(this.loginForm.smscode === ""){
            this.$modal.msgError("请输入您的验证码")
            return;
          }
        }
        // 检测异常操作
        this.doAction = "this.handleLogin()";
        if (this.sliderVerifyAddVerifyNumber()) {
          return;
        }
        this.pwdLogin()
			},
			// 登录 
			async pwdLogin() {
        this.$modal.loading("登录中，请耐心等待...")
				this.$store.dispatch('Login', this.loginForm).then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				}).catch(() => {

        })
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					// 若存在签署详情的参数
					if (!!this.signDetail) {
            this.$tab.reLaunch('/pages/sign/detail?id=' + this.signDetail)
            return;
					}

          // 存在支付订单
          if (!!this.orderPay) {
            // 登录企业和发送方企业不一致 自动切换
            if (res.user.companyId != this.orderPay) {
              changeCompany(this.orderPay, this.companyName + "请您代支付一个采购订单，系统已帮您切换至该企业。","知道了，去支付", "/pages/mine/work/product/order/order");
              return;
            } else {
              // 存在支付订单
              this.$tab.reLaunch('/pages/mine/work/product/order/order')
              return;
            }
					}

          // 存在法人变更签署文件 跳转到人脸认证
          if (!!this.verifyType) {
            // 根据公司id查询是否已经完成人脸
            getLegalChangeRecordNewInfo(this.companyId).then(response => {
              // 等于1 法人已经完成了人脸识别
              if (response.data.status != 1) {
                this.$tab.reLaunch('/pages/authentication/personal/facePersonal?source=sms&verifyType=1&data=' + this.verifyType)
                return;
              }
            });
          }
          // 普通登录
          this.$tab.reLaunch('/pages/index')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-form-content ::v-deep .swiper-tab-list{
		margin: 0 50rpx;
	}
	page {
		background-color: $uni-bg-color;
	}
	
	.sounds-text{
		text-align: right; 
		margin-top: 6rpx; 
		color: #777;
		font-size: 26rpx;
	}
	
	.sms-input ::v-deep.is-input-border{
		background: #f5f6f7 !important;
		width: 95%;
		border: none;
		padding-left: 14rpx;
	}
	
	.text-primary {
		color: $uni-color-primary;
	}

	.gray-row {
		color: #777;
		font-size: 26rpx;
	}

	.marginLeft {
		margin: 0 10px;
		vertical-align: middle;
	}

	.normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 42rpx;
			text-align: center;
			padding-top: 25%;

			image {
				border-radius: 8rpx;
			}

			.title {
				margin-left: 20rpx;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 0 auto;
			margin-top: 22%;
			width: 80%;

			.input-item {
				// margin: 20px auto;
				margin-top: 40rpx;
				background-color: #f5f6f7;
				height: 90rpx;
				border-radius: 40rpx;

				.icon {
					font-size: 38rpx;
					margin-left: 20rpx;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 28rpx;
					line-height: 40rpx;
					text-align: left;
					padding-left: 30rpx;
				}

			}

			.login-btn {
				margin: 10rpx 0;
				height: 90rpx;
			}

		}

		.easyinput {
			width: 100%;
		}
	}

	.login-code {
		width: 360rpx;
		color: $uni-color-primary;
	}

	.xieyi {
		color: #333;
		font-size: 24rpx;
	}
</style>
